import React from 'react';
import {Image, Modal, StatusBar, Text, TouchableOpacity, View, StyleSheet, DeviceEventEmitter} from 'react-native';
import Constants from '../utils/Constants';
import screen from '../utils/screen';
import RequestUtil from '../utils/RequestUtil';
import DialogTip from '../widgets/modal/DialogTip';
import Api from '../utils/Api';
import {filterErrorMsg, FontFamily, getffly} from '../utils/common';
import {AppModal} from '../widgets/modal';
import Images from '../images/Images';
import AppEvent from '../utils/AppEvent';
const contentWidth = screen.width - screen.PIXEL_240;

export default  class VipUpChange extends React.Component {

    constructor(props) {
        super(props);


    }

    state={
        data:null,
        modalVisible:false
    }


    componentDidMount = () => {

    }



    upgradeVip = ()=>{
        this.tipDialog.showLoading()
        let param = {level:this.state.data.id}
        // console.log('upgrade ',param)
        RequestUtil.post(Api.upgrade,param,true).then(res=>{
            let data = res.data
            console.log('upgradeVip',res)
            this.tipDialog.hideDialog()

            // this.tipDialog.showSuccess(Constants.order.order_submitted)
            // this.tipDialog.showDialog(3,Constants.order.order_submitted,0)

            DeviceEventEmitter.emit(AppEvent.update_vip,{title:Constants.order.order_submitted})
            this.hideDialog()
        },error=>{
            this.tipDialog.hideDialog()
            this.tipDialog.showTip(error.msg)
        })
    }



    hideDialog = () => {

        this.setState({ modalVisible: false });
    }

    show = (data)=>{
        this.setState({
            modalVisible:true,
            data:data
        })
    }

    renderContent(){
        const {data} = this.state
        if(!data) return null

        const item = data.upgrade[0]
        // console.log('vip upgrade',data)
        let payEnable = false
        let balance = data.user_balance.toString().replace(/,/g,'')
        let price = item.price.toString().replace(/,/g,'')
        if(Number(balance) >= Number(price)){
            payEnable = true
        }
        return (
            <View style={styles.innerContainer}>

                <Text style={styles.title}>{Constants.common.upgrade}</Text>

                <View style={styles.contentBg}>
                    <Text style={{fontSize:14,color:'#377C74'}}>{item.year +  Constants.vip.year}</Text>
                    <Text style={{fontSize:24,color:'#377C74',marginVertical:screen.PIXEL_10}}>{Constants.appsymbol + ' ' + item.price}</Text>
                    <Text style={{fontSize:14,color:'#377C74'}}>{Constants.appsymbol + ' ' + item.avg + Constants.vip.per_day}</Text>
                </View>

                <Text style={{fontSize:15,color:'#D85700',marginTop:screen.PIXEL_20}}>Current balance {Constants.appsymbol + ' '+ data.user_balance } </Text>

                {
                    payEnable ? (
                        <TouchableOpacity
                            style={ styles.submitBtn}
                            onPress={this.upgradeVip}
                        >
                            <Text style={{color:'#fff',fontSize:16}}>Pay {Constants.appsymbol + ' ' + item.price}</Text>
                        </TouchableOpacity>
                    ) : (
                        <View style={ [styles.submitBtn,{backgroundColor:'#C1C1C1'}]}>
                            <Text style={{color:'#fff',fontSize:16}}>Pay {Constants.appsymbol + ' ' + item.price}</Text>
                        </View>
                    )
                }

            </View>

        )
    }



    render() {




        return (
            <Modal
                animationType={'none'}
                transparent={true}
                visible={this.state.modalVisible}
                onRequestClose={() => { this._setModalVisible(false) }}
                onShow={this.startShow}
            >
                <StatusBar barStyle='light-content' translucent={true} backgroundColor="rgba(16, 17, 22,0.75)" animated={false} />
                <TouchableOpacity
                    activeOpacity={1.0}
                    onPress={() => {

                    }}
                    style={styles.bottomcontainer}>

                    <View style={styles.container}>

                        {this.renderContent()}

                        <TouchableOpacity
                            style={{marginTop:screen.PIXEL_20}}
                            onPress={()=>{
                                this._setModalVisible(false)
                            }}
                        >
                            <Image source={Images.close} style={styles.close}/>
                        </TouchableOpacity>
                    </View>
                    <DialogTip ref={ref=>{this.tipDialog = ref}} />
                </TouchableOpacity>
            </Modal>
        );
    }


    _setModalVisible = (visible) => {
        this.setState({ modalVisible: visible });
    }

    startShow = () => {

    }
}



const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    innerContainer: {
        width: screen.width - screen.PIXEL_100,
        padding:screen.PIXEL_40,
        backgroundColor: '#FFFFFF',
        justifyContent:'center',
        alignItems: 'center',
        borderRadius: screen.PIXEL_50
    },

    close:{
        width:screen.PIXEL_70,
        height:screen.PIXEL_70
    },
    bottomcontainer: {
        zIndex: 2,
        flex: 1,
        alignItems: 'center',
        backgroundColor: 'rgba(16, 17, 22,0.75)',
        justifyContent: 'flex-end',
    },
    title:{
        color:'#377C74',fontSize:19,fontFamily:getffly(FontFamily.medium),textAlign:'center'
    },
    contentBg:{
        marginTop: screen.PIXEL_40,width:screen.PIXEL_400,height:screen.scaleSize(280),
        borderRadius:screen.PIXEL_20,borderColor:'#377C73',borderWidth:2,
        backgroundColor:'#E8FFFC',alignItems:'center',justifyContent:'center'
    },
    submitBtn:{
        backgroundColor:'#377C74',height:screen.PIXEL_90,width:'100%',marginTop:screen.PIXEL_40,
        borderRadius:screen.PIXEL_20,justifyContent:'center',alignItems:'center'
    },


});



